Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p class="declar">Have you ever celebrated an anniversary with 31 zeroes ? I am about to do it.<br>Well, a
  "secondiversary" in fact. In binary.</p>
<p class="declar">My age in seconds :</p>
<p id=agedec class="line"></p>
<p id=agebin class="line"></p>
<p class="declar">Int32 overflow will occur in ...</p>
<p id=leftbin class="line"></p>
<div id="timeline">
  <div class="lifetext" id="lft0">Hello World</div>
  <div class="lifetext" id="lftbinnum">
    <p>Aged 9 or 10. Learned in this book cool stuff called "binary numbers".<br>
      They say it is the language of computers. Although it is unlikely, I hope I will have the chance to see a
      computer at least once in my life.</p>
    <p>(right-click picture and open in new tab to read the article)</p>
    <p><img src="https://assets.codepen.io/2574552/Mathematiques.png" alt="book" style="height: 5em;"></p>
  </div>
  <div class="lifetext" id="lftheart">
    <p>June, 1974. The day before my baccalaureate, ask classmate to be my girlfriend.<br>
      Still with her today.</p>
  </div>
  <div class="lifetext" id="lftfortran">September, 1976. At school, I begin to learn Fortan. Running a program is a
    heavy process:
    punch cards, put
    the stack of card on a shelf, and come back the next day to find a listing saying "syntax error line 46". Re-punch
    card 46, wait another 24 hrs crossing my fingers… Never used Fortan later, but it taught me I loved programming.
  </div>
  <div class="lifetext" id="lfthp">
    <p>September, 1977. Still at school, first practical work directly on computer.<br>Enter program in binary with
      front
      panel switches. The program was short :)</p>
    <p><img src="https://assets.codepen.io/2574552/HP2100A.png" alt="book" style="height: 8em;"></p>
  </div>
  <div class="lifetext" id="lftkim1">
    <p>December 1979. I buy my 1st computer : a KIM 1.<br>
      Based on 8-bit microprocessor 6502. 1k RAM. No typo. Hexadecimal keyboard for input, six seven-segments digits
      display : 4 for address, 2 for data.<br>
      I had very much fun with it, coding in hexadecimal. I still remember only one opcode : A9 for load register A
      (immediate addressing).
    </p>
    <p><img src="https://assets.codepen.io/2574552/KIM1.png" alt="book" style="height: 5em;"></p>
  </div>
  <div class="lifetext" id="lftapple2">January, 1982. Now I have an Apple 2 - written Apple ][. With Basic, 48k RAM,
    graphics, floppy disk… More comfort than I ever dreamt of.<br>
    French personal 8-bit computers (TO-8, TO-9) will follow with more and more amazing features during the next
    years.</div>
  <div class="lifetext" id="lftpc">I bought my first 16bit PC about in 1990. I can't really say when. One thing I am
    sure is that I did not even know the word "internet" in those times.<br>
    Turbo-Pascal became my favorite language.</div>
  <div class="lifetext" id="lftinternet">
    <p>Beginning of 2000. First personal internet subscription. I discover HTML and
      JS. CSS? No, what is this?<br>
      I put my first web page on line in december: a game of solitaire, written in a bad JS. No, worse than that. But
      I
      was proud of it.</p>
    <p>Try it at <a href="http://claude11.chez-alice.fr/solitaire.htm">http://claude11.chez-alice.fr/solitaire.htm</a>.
      In French.
      The form to send comments does not work, but the game itself does.</p>
  </div>
  <div class="lifetext" id="lftphp">In 2001-2015, I make heavy use of PHP and mysql.</div>
  <div class="lifetext" id="lftjs">About 2016: I re-discover JS. I realize it is not just a toy.</div>
  <div class="lifetext" id="lftcodepen">I sign up for Codepen. I publish my first pen in november 2018. Nice place, I
    think I will come back often.</div>
  <div class="lifetext" id="lftcodepenpro">March, 2022. I become a Codepen "pro".</div>
  <div class="lifetext" id="lftnow">Now!</div>
  <div class="lifetext" id="lft99">int32 overflow</div>
</div>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
  background-color: #fff;
  margin: 0;
  padding: 5px;
  border-width: 0;
}

p.figure {
  position: absolute;
  text-align: center;
  margin: 0;
  padding: 0;
  background-color: gold;
  border-radius: 0.1em;
  box-shadow: -3px 3px 3px #00000080;
}

p.line {
  padding-top: 3px;
  padding-bottom: 3px;
  position: relative;
  overflow: hidden;
}

p.declar {
  text-align: center;
  font-size: 150%;
}

#timeline {
  margin: 2em;
  padding: 0;
  height: 1em;
  border-radius: 0.5em 0.5em;
  background-color: gold;
  position: relative;
}

.timepoint {
  margin: 0;
  padding: 0;
  height: 1em;
  width: 1em;
  border-radius: 50%;
  top: 0px;
  position: absolute;
  background-color: #0a0;
}

.timepoint.now {
  background-color: #0af;
}

.timepoint.picked {
  background-color: #f00;
  z-index: 1;
}

.lifetext {
  position: absolute;
  border-radius: 5px;
  border: solid 1px black;
  padding: 1ex;
  bottom: 1.5em;
  background-color: #fffff0;
}

.lifetext p:has(img) {
  text-align: center;
}

console.log("Event Fired")
"use strict";

const int32ovf = 65536 * 32768;
const SMALL_INTERVAL = 0.1; // relative to char width
const LARGE_INTERVAL = 0.3;
const MARGIN = 1;
const DUR = 0.3; // duration to change a figure (in seconds)

let smallInterval, largeInterval, margin;

let targetCharWidth,
  progFontSize,
  actualCharWidth,
  actualCharHeight,
  vertInterval;
let ageDec, leftDec, ageBin;
let elapsed, remaining;
let timeLine;

// shortcuts for Math.
const mrandom = Math.random;
const mfloor = Math.floor;
const mround = Math.round;
const mceil = Math.ceil;
const mabs = Math.abs;
const mmin = Math.min;
const mmax = Math.max;

const mPI = Math.PI;
const mPIS2 = Math.PI / 2;
const mPIS3 = Math.PI / 3;
const m2PI = Math.PI * 2;
const m2PIS3 = (Math.PI * 2) / 3;
const msin = Math.sin;
const mcos = Math.cos;
const matan2 = Math.atan2;

const mhypot = Math.hypot;
const msqrt = Math.sqrt;

const rac3 = msqrt(3);
const rac3s2 = rac3 / 2;

//------------------------------------------------------------------------

function alea(mini, maxi) {
  // random number in given range

if (typeof maxi == "undefined") return mini * mrandom(); // range 0..mini

return mini + mrandom() * (maxi - mini); // range mini..maxi
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function intAlea(mini, maxi) {
  // random integer in given range (mini..maxi - 1 or 0..mini - 1)
  //
  if (typeof maxi == "undefined") return mfloor(mini * mrandom()); // range 0..mini - 1
  return mini + mfloor(mrandom() * (maxi - mini)); // range mini .. maxi - 1
}
//------------------------------------------------------------------------

function getFontSize() {
  /* key point the 32 figures must fit in the width, :
      - grouped by 4 with small interval between 2 chars
      - with wideInterval between 2 groups of 4
      - with margin before 1st and after las char
      */

targetCharWidth =
    (window.innerWidth - 10) /
    (2 * MARGIN + 7 * LARGE_INTERVAL + 24 * SMALL_INTERVAL + 32);
  progFontSize = targetCharWidth;

let elem = document.getElementById("agedec"); // any other field would do

// make actual width as close as possible to targetWidth
  // possible because all figures (0..9) have the same width. Al least with "normal" fonts

let p = document.createElement("p");
  p.classList.add("figure");
  elem.appendChild(p);

p.append("0");
  do {
    p.style.fontSize = progFontSize + "px";
    let st = p.getBoundingClientRect();
    actualCharWidth = st.width;
    actualCharHeight = st.height;
    if (mabs(actualCharWidth / targetCharWidth - 1) < 1e-2) {
      // good
      break; // out of do loop
    }
    progFontSize *= targetCharWidth / actualCharWidth;
  } while (true);

elem.innerHTML = "";
  // actual intervals between elements
  margin = targetCharWidth * MARGIN;
  smallInterval = targetCharWidth * SMALL_INTERVAL;
  largeInterval = targetCharWidth * LARGE_INTERVAL;
  vertInterval = smallInterval;
} // getFontSize

//------------------------------------------------------------------------
function displayFieldUp(field, string, stringAfter, alpha) {
  let k, decal;
  field.ps.forEach((pp, k) => {
    pp[0].innerHTML = string.charAt(k);
    if (k < field.ps.length - stringAfter.length) {
      // not changing
      pp[0].style.top = 0;
      pp[1].style.top = 2 * actualCharHeight + "px";
    } else {
      // changing
      decal = -alpha * (actualCharHeight + vertInterval);
      pp[0].style.top = decal + "px";
      pp[1].style.top = (actualCharHeight + vertInterval) * (1 - alpha) + "px";
      pp[1].innerHTML = stringAfter.charAt(
        k - field.ps.length + stringAfter.length
      );
    }
  });
} // displayFieldUp
//------------------------------------------------------------------------
function displayFieldDown(field, string, stringAfter, alpha) {
  let k, decal;
  field.ps.forEach((pp, k) => {
    pp[0].innerHTML = string.charAt(k);
    if (k < field.ps.length - stringAfter.length) {
      // not changing
      pp[0].style.top = 0;
      pp[1].style.top = 2 * actualCharHeight + "px";
    } else {
      // changing
      decal = alpha * (actualCharHeight + vertInterval);
      pp[0].style.top = decal + "px";
      pp[1].style.top = (actualCharHeight + vertInterval) * (alpha - 1) + "px";
      pp[1].innerHTML = stringAfter.charAt(
        k - field.ps.length + stringAfter.length
      );
    }
  });
} // displayFieldUp
//------------------------------------------------------------------------

//------------------------------------------------------------------------
function setAgeDec() {
  ageDec = {};
  ageDec.ps = setDisplayField("agedec", [
    largeInterval,
    smallInterval,
    smallInterval,
    largeInterval,
    smallInterval,
    smallInterval,
    largeInterval,
    smallInterval,
    smallInterval
  ]);
} // setAgeDec

//------------------------------------------------------------------------
function refreshAgeDec() {
  const str1 = mfloor(elapsed).toString().padStart(10, "0");
  const str2 = (mfloor(elapsed) + 1).toString().padStart(10, "0");
  let stringAfter = "";

for (let k = str1.length - 1; k > 0 && str1.charAt(k) != str2.charAt(k); --k)
    stringAfter = str2.charAt(k) + stringAfter;

//------------------------------------------------------------------------
function refreshAgeBin() {
  const str1 = mfloor(elapsed).toString(2).padStart(32, "0");
  const str2 = (mfloor(elapsed) + 1).toString(2).padStart(32, "0");
  let stringAfter = "";

for (let k = str1.length - 1; k > 0 && str1.charAt(k) != str2.charAt(k); --k)
    stringAfter = str2.charAt(k) + stringAfter;

//------------------------------------------------------------------------
function refreshLeftBin(remaining) {
  let str1 = mfloor(remaining + 1)
    .toString(2)
    .padStart(32, "0");
  let str2 = (mfloor(remaining + 1) - 1).toString(2).padStart(32, "0");

let stringAfter = "";
  if (remaining < 0) {
    remaining /= 4; // slow down display
    str1 = "automatically switched to uint32";
    stringAfter = "         great, isn't it ?      ";
    if (mfloor(remaining) & 1) [str1, stringAfter] = [stringAfter, str1];
  } else {
    for (
      let k = str1.length - 1;
      k > 0 && str1.charAt(k) != str2.charAt(k);
      --k
    )
      stringAfter = str2.charAt(k) + stringAfter;
  }

let alpha = 0;
  if (remaining - mfloor(remaining) < DUR)
    alpha = 1 - (remaining - mfloor(remaining)) / DUR;
  if (alpha == 0) stringAfter = ""; // not moving yet
  displayFieldDown(leftDec, str1, stringAfter, alpha);
}
//------------------------------------------------------------------------
function addTimePoint(time, divid) {
  let pos = time - birth;
  if (pos < 0 || pos > timeLine.timeLength) return; // can't be added

let tp = document.createElement("div");
  tp.classList.add("timepoint");
  if (divid == "lftnow") tp.classList.add("now");
  let leftPos = (pos / timeLine.timeLength) * timeLine.width;
  tp.style.left = leftPos + "px";

timeLine.elem.append(tp);
  timeLine.timePoints.push({
    tp,
    leftPos,
    txtDiv: document.getElementById(divid)
  });
} // addTimePoint

//------------------------------------------------------------------------
function displayTimePoint(timePoint) {
  timeLine.timePoints.forEach((tp) => {
    if (tp == timePoint) {
      tp.txtDiv.style.display = "block";
      tp.tp.classList.add("picked");
    } else {
      tp.txtDiv.style.display = "none";
      tp.tp.classList.remove("picked");
    }
  });
  if (!timePoint) return; // fake timePoint, just to cancel selection
  let rect = timePoint.txtDiv.getBoundingClientRect();
  let rect1 = timeLine.elem.getBoundingClientRect();
  let posleft = timePoint.leftPos - rect.width / 2;
  if (posleft < 0) posleft = 0;
  if (posleft + rect.width > timeLine.width + timeLine.height)
    posleft = timeLine.width + timeLine.height - rect.width;
  timePoint.txtDiv.style.left = posleft + "px";
} // displayTimePoint
//------------------------------------------------------------------------

case 1: // on line itself
      if (action.action == "unselect") {
        if (action.pos.y < 0) {
          // moving towards text window : give little delay
          timeLine.state = 2;
          setTimeout(() => displayTimeLine({ action: "timeout" }), 1000);
        } else {
          // not going to point text : delete immediately
          displayTimePoint();
          delete timeLine.picked;
        }
        return;
      }
      if (action.action == "move" || action == "enter") {
        if (action.pos.y < -1) return; // in text window, don't do anything
        tp = quelTP(action);
        if (tp === timeline.picked) return; // no change
        if (!tp) {
          displayTimePoint(); // delete
          delete timeLine.picked;
        }
        displayTimePoint(tp);
        timeLine.picked = tp;
      }
      break;

case 2:
      if (
        action.action == "timeout" ||
        (action.action == "unselect" && action.pos.y > 0)
      ) {
        displayTimePoint(); // delete
        delete timeLine.picked;
        timeLine.state = 0;
        return;
      }
      if (action.action == "enter" || action.action == "move") {
        timeLine.state = 1;
        displayTimeLine(action);
        return;
      }
  } // switch
}
//------------------------------------------------------------------------

let animate;

{
  // scope for animate

let animState = 0;

animate = function () {
    requestAnimationFrame(animate);
    switch (animState) {
      case 0:
        if (startOver()) {
          ++animState;
        }
        break;

case 1:
        elapsed = (Date.now() - birth) / 1000;
        remaining = int32ovf - elapsed;
        refreshAgeDec();
        refreshLeftBin(remaining);
        refreshAgeBin();

break;

case 2:
        break;
    } // switch
  }; // animate
} // scope for animate

//------------------------------------------------------------------------
//------------------------------------------------------------------------

function startOver() {
  getFontSize();

setAgeDec();
  setLeftBin();
  setAgeBin();
  return true;
} // startOver

//------------------------------------------------------------------------

function mouseClick(event) {
  messages.push({ message: "click" });
} // mouseClick

//------------------------------------------------------------------------
//------------------------------------------------------------------------
// beginning of execution
const birth = new Date("1956-09-03T07:00:00+01:00"); // Hey, this is private data. Don't look at it.

requestAnimationFrame(animate);
function tell() {
  console.log(document.querySelector("body").getBoundingClientRect.width);
}

createTimeLine();
document.querySelector("body").addEventListener("click", tell);

Frontend Forever App